<template>
  <div class="mine">
    <div class="mine-top">
      <!-- <img
        src="@/assets/center-portrait.png"
        alt=""
        style="
          border-radius: 50%;
          width: 67px;
          height: 67px;
          margin-right: 20px;
        "
      /> -->
      <UploadAvater></UploadAvater>
      <span
        @click="$router.push({ name: 'login' })"
        v-if="!username && !telphone"
        >立即登录</span
      >
      <span v-else>
        <template v-if="userinfo">
          {{ userinfo.username }} / {{ userinfo.phone }}
        </template>
      </span>
    </div>
    <div class="my-order-table">
      <li>
        <img
          src=""
          alt=""
        />
        <p>电影订单</p>
      </li>
      <li>
        <img
          src=""
          alt=""
        />
        <p>商品订单</p>
      </li>
    </div>
    <van-cell-group>
      <van-cell title="电影券" is-link icon="credit-pay" />
      <van-cell title="组合红包" is-link icon="bill-o" />
      <van-cell title="余额" is-link icon="balance-o" />
      <van-cell title="我的收藏" is-link icon="star-o" title-style="set" />
      <van-cell title="设置" is-link icon="setting-o" />
    </van-cell-group>
    <van-button v-if="username || telphone" class="btn" @click="confimLoginout"
      >退出登录</van-button
    >
  </div>
</template>
<script>
import { Dialog } from "vant";
import UploadAvater from "@/components/uploadAvater.vue";
import { mapState, mapMutations } from "vuex";

export default {
  data() {
    return {
      avatar: require("@/assets/center-portrait.png"),
    };
  },
  components: {
    UploadAvater,
  },
  computed: {
    ...mapState("login", ["userinfo", "username", "telphone"]),
  },
  mounted() {
    if (this.username || this.telphone) {
      this.$ajax
        .userinfo({
          phone: this.telphone,
          username: this.username,
        })
        .then((res) => {
          console.log(res);
          if (res.code === 200) {
            this.changeUserInfo(res.result);
          } else {
            this.changePhone(null);
            this.changeUsername(null);
            this.resetUserInfo();
          }
        });
    }
    // console.log(userinfo, username, telphone);
  },
  methods: {
    ...mapMutations("login", [
      "changePhone",
      "changeUsername",
      "changeUserInfo",
      "resetUserInfo",
    ]),
    toLogin() {
      this.$router.push({ name: "login" });
    },
    toRegister() {
      this.$router.push({ name: "register" });
    },
    confimLoginout() {
      Dialog.confirm({
        title: "退出登录",
        message: "亲，你确认要狠心离开吗~~~",
      })
        .then(() => {
          // on confirm
          this.$router.go(0);

          // localStorage
          // localStorage.removeItem('telphone')
          // localStorage.removeItem('username')
          // localStorage.removeItem('server_token')

          //
          window.sessionStorage.removeItem("telphone");
          window.sessionStorage.removeItem("username");
          window.sessionStorage.removeItem("server_token");

          this.changePhone(null);
          this.changeUsername(null);
          this.resetUserInfo();
        })
        .catch(() => {
          // on cancel
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.mine {
  overflow: hidden;
  overflow-y: auto;
  .btn {
    width: 100%;
    margin: 10px 0;
  }
}
.mine-top {
  width: 100%;
  height: 160px;
  padding-left: 22px;
  padding-top: 22px;
  background: url("../assets/center-bg.png") no-repeat;
  background-size: 100%;
  display: flex;
  align-items: center;
  span {
    font-size: 18px;
    color: #fff;
  }
}
.my-order-table {
  display: flex;
  align-items: center;
  background-color: #fff;
  height: 80px;
  margin-bottom: 10px;
  li {
    flex: 1;
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    img {
      width: 26px;
      height: 26px;
    }
    p {
      color: #797d82;
      font-size: 13px;
    }
  }
}
::v-deep .van-cell__left-icon {
  color: #ff8462;
}
</style>
